<template>
  <app-module>
    <div slot="top" class="app-service-center-content-habit__top">
      <div class="app-service-center-content-habit__top__title-wrapper">
        <div class="app-service-center-content-habit__top__title-wrapper__title">微习惯</div>
      </div>
    </div>
    <div slot="center" class="app-service-center-content-habit__center">
      <t-table :items="store.habits" size="normal" border stripe>
        <t-table-column label="编号" prop="id" width="2"></t-table-column>
        <t-table-column label="习惯" prop="content" width="10"></t-table-column>
        <t-table-column label="今日番茄" prop="date" width="2"></t-table-column>
        <t-table-column label="功能" prop="action" width="4">
          <template slot-scope="scope">
            <t-button :type="scope.item.state" :value="scope.item.stateVal" size="small" @click="punch(scope)"></t-button>
            <t-button type="primary" size="small" @click="openUpdateDialog(scope)">管理</t-button>
          </template>
        </t-table-column>
      </t-table>
    </div>
    <div slot="bottom" class="app-service-center-content-habit__bottom">
      <div class="app-service-center-content-habit__bottom__btn-wrapper">
        <t-button type="insert" size="normal" @click="openCreateDialog">添加习惯</t-button>
      </div>
    </div>
    <div slot="other">
      <habit-create-dialog :store="store" @close="closeCreateDialog"></habit-create-dialog>
      <habit-update-dialog :store="store" @close="closeUpdateDialog"></habit-update-dialog>
    </div>
  </app-module>
</template>

<script>
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  import TButton from '@/components/button';
  import appModule from '@/app/service/center/content/module';
  import HabitCreateDialog from '@/app/service/center/content/habit/create-dialog';
  import HabitUpdateDialog from '@/app/service/center/content/habit/update-dialog';

  export default {
    name: 'app-service-center-content-habit',
    components: {
      TButton,
      appModule,
      TTable,
      TTableColumn,
      HabitCreateDialog,
      HabitUpdateDialog,
    },
    data() {
      return {
        store: {
          habits: [],
          current: {
            item: null,
            input: {
              name: '',
              synopsis: '',
            },
          },
          createDialog: {
            title: '',
            visible: false,
          },
          updateDialog: {
            title: '',
            visible: false,
          },
        },
      };
    },
    mounted() {
      const target = 'api/accounts/habits';
      this.$http.request({
        url: target,
        method: 'get',
      }).then((response) => {
        this.init(response.data);
      });
    },
    watch: {
      /* eslint-disable object-shorthand */
      '$route'() {
        const target = 'api/accounts/habits';
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.init(response.data);
        });
      },
    },
    methods: {
      init(payload) {
        Object.values(payload).forEach((item) => {
          const createDate = this.dateFormat(item.createTime);
          const updateDate = this.dateFormat(item.updateTime);
          const index = this.store.habits.length + 1;
          const stateVal = item.state === 'todo' ? '打卡' : '完成';
          this.store.habits.push({
            index,
            name: item.name,
            tomatoInfo: `${item.todayTomatoAmount} 颗番茄`,
            createDate,
            id: item.id,
            synopsis: item.synopsis,
            state: item.state,
            stateVal,
            updateDate,
            tomatoAmount: item.tomatoAmount,
            todayTomatoAmount: item.todayTomatoAmount,
          });
        });
      },
      openCreateDialog() {
        this.store.createDialog.title = '微习惯创建';
        this.store.createDialog.visible = true;
      },
      openUpdateDialog(scope) {
        this.store.updateDialog.title = '微习惯管理';
        this.setCurrentItem(scope.item.id);
        this.store.updateDialog.visible = true;
      },
      closeCreateDialog() {
        this.store.createDialog.visible = false;
        this.finalizeDialog();
      },
      closeUpdateDialog() {
        this.store.updateDialog.visible = false;
        this.finalizeDialog();
      },
      finalizeDialog() {
        this.store.createDialog.title = '';
        this.store.updateDialog.title = '';
        this.clearCurrentItem();
      },
      setCurrentItem(id) {
        this.store.current.item = this.store.habits.filter((item) => {
          if (item.id === id) {
            this.store.current.input.name = item.name;
            this.store.current.input.synopsis = item.synopsis;
            return item;
          }
          return null;
        })[0];
      },
      clearCurrentItem() {
        this.store.createDialog.title = '';
        this.store.updateDialog.title = '';
        this.store.current.item = null;
        this.store.current.input.name = '';
        this.store.current.input.synopsis = '';
      },
      dateFormat(ut) {
        const day = ut.dayOfMonth;
        const dayValue = day < 10 ? `0${day}` : `${day}`;
        return `${ut.year}-${ut.monthValue}-${dayValue}`;
      },
      punch(scope) {
        const id = scope.item.id;
        if (scope.item.state === 'done') {
          return;
        }
        Object.values(this.store.habits).forEach((item) => {
          if (item.id === id) {
            item.state = 'done';
            item.stateVal = item.state === 'todo' ? '打卡' : '完成';
            item.tomatoAmount += 1;
            item.todayTomatoAmount += 1;
            item.tomatoInfo = `${item.todayTomatoAmount} 颗番茄`;
          }
        });
        this.$noticeHub.tomato({ message: '获得一颗[习惯番茄], 评价一下这颗番茄呗！', duration: 1800000 });
        const target = `api/habits/${id}/actions/punch`;
        this.$http.request({
          url: target,
          method: 'put',
        }).then(() => {
        }).catch(() => {
        });
      },
    },
  };
</script>